<template>
	<view class="classify">
		<block v-for="(classifyItem,classifyIndex) in menuTimeListData" :key="classifyIndex">
			<img-title :title="classifyItem.menuTime" :info="menuTimeListInfo[classifyIndex]" img="https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg"></img-title>
			<classify-list :title="classifyItem.menuTime" :classifyListData="classifyItem.list"></classify-list>
		</block>
		<fab :right="50" :bottom="80" bgColor="#e7ebed" color="#8799a3" @click="onFab"></fab>
	</view>
</template>

<script>
	import imgTitle from '../../components/imgTitle/imgTitle.vue'
	import classifyList from '../../components/classifyList.vue'
	import fab from '../../components/fab/fab.vue'
	export default {
		components: {
			classifyList,
			imgTitle,
			fab
		},
		data() {
			return {
				menuTimeListData: [],
				menuTimeList: ['早餐', '午餐', '晚餐'],
				menuTimeListInfo: ['营养与动力的早餐，让你精神靓丽一整天', '营养午餐，视觉与味觉的双重享受', '让可口的晚餐安抚疲劳一天的身体']
			}
		},
		onLoad: async function() {

			await Promise.all((this.menuTimeList.map((type, tabIndex) => {
				return this.$api.getMenuByTime({
					menuTime: type
				})
			}))).then(res => {
				this.menuTimeListData = res.map(item => {
					return {
						menuTime: item.menuTime,
						list: item.data
					}
				})
			})
		},
		methods: {
			onFab() {
				this.$comm.navigateTo('/pages/btns/btns')
			}
		}
	}
</script>

<style>

</style>
